<template>
  <div :class="styles['list']">
    <el-table v-if="propsTableVisible" :data="propsTable.rows" border v-bind="propsTable.attrs" v-on="propsTable.events || {}" :class="styles['list-table']">
      <template v-for="(col, colIndex) in propsTable.columns" :key="col.prop || colIndex">
        <el-table-column :align="propsTable.attrs && propsTable.attrs.align || 'left'" v-bind="col" v-if="!col.hidden">
          <!--        有传默认插槽或者是空值处理才显示-->
          <template #default="scope" v-if="(col.slots && col.slots.default) || col.void">
            <slot :name="col.slots.default" v-bind="scope" v-if="col.slots && col.slots.default"/>
            <span v-else>{{ col.void ? (scope.row[col.prop] || '-' ) : scope.row[col.prop] }}</span>
          </template>
          <!--        自定义列头-->
          <template #header="scope" v-if="col.slots && col.slots.header">
            <slot :name="col.slots.header" v-bind="scope"/>
          </template>
        </el-table-column>
      </template>
<!--      空数据统一显示-->
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
    <el-pagination
        v-if="propsPaginationVisible"
        v-model:current-page="propsPagination.currentPage"
        v-model:page-size="propsPagination.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="prev, pager, next, jumper, sizes, total"
        background
        v-bind="pagination"
        v-on="propsPagination.events || {}"
        :class="styles['list-pagination']"
        :style="{justifyContent: paginationAlign[propsPagination.align || 'left'], marginTop: propsTableVisible ? '24px' : '0'}"
    />
  </div>
</template>

<script setup name="List">
import {computed, defineProps} from 'vue'

const props = defineProps({
  table: {
    type: Object,
    default: () => ({
      columns: [],
      rows: []
    })
  },
  pagination: {
    type: Object,
    default: () => ({})
  }
})

const propsTable = computed(() => props.table)
const propsTableVisible = computed(() => Object.keys(props.table).length > 0)
const propsPagination = computed(() => props.pagination)
const propsPaginationVisible = computed(() => Object.keys(props.pagination).length > 0)

const paginationAlign = {
  left: 'flex-start',
  center: 'center',
  right: 'flex-end'
}

</script>

<style lang="less" src="./index.less" module="styles"></style>
